<template>
	<view class="page" @touchstart='hideAll'>
		<!-- 头部 start -->
		<view class="cu-custom bg-white   " :style="[{ height: CustomBar + 'px' }]">
			<view class="cu-bar bg-top fixed bg-white" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
				<view class="margin-left width-160 text-left" @tap="back"><text class="cuIcon-back"></text></view>
				<view class="">分类管理</view>
				<view class="right margin-right text-right width-160">
					<text class="text-df text-theme text-right " @click="addPop('add','','')">+添加分类</text>
				</view>
			</view>
		</view>
		<!-- 头部 end -->
		<!-- 筛选 -->
		<!-- loading组件 -->
		<fu-loading v-if="isShowLoading"></fu-loading>
		<block v-else>
			<!--商品列表 start-->
			<view class=" padding-lr-24 relative  margin-top-sm padding-bottom">
				<view class="margin-bottom-sm bg-white  radius-16 padding-lr-sm" v-for="(item, index) in cateLists"
					:key="index">
					<view class="flex align-center relative  padding-top justify-between">
						<view class="flex align-center text-lg">
							<view class="" @tap='openItem(item)'>
								<text class="cuIcon-unfold text-df" v-if="item.isOpen"></text>
								<text class="cuIcon-fold text-theme text-df" v-if="!item.isOpen"></text>
							</view>

							<view class="text-333 margin-left-xs">{{item.name}}
								<text class="text-999 text-sm">（{{item.child_count}}）</text>
							</view>
						</view>
						<view class="" @tap='openSet(item)'>
							<image src="/static/icon/2.png" mode="aspectFill" class="width-40 height-40">
							</image>
						</view>
						<image src="/static/icon/1.png" v-if="item.isShowBox" mode="aspectFill"
							class="width-160 height-200 hiddenBox"></image>
						<view class="hiddenText" v-if="item.isShowBox">
							<view class="text-df text-white padding-tb-16 margin-top-sm text-center" @tap.stop="editItem(item,'','')">
								修改名称</view>
							<view class="text-df text-white padding-bottom-16  text-center" @tap.stop="addPop('add','child',item)">
								添加子类</view>
							<view class="text-df text-white  text-center" @tap.stop="delItem(item,'','')">删除</view>
						</view>
					</view>
					<view class="padding-tb solid-bottom  justify-between flex algin-center" v-if="!item.isOpen"
						v-for="(child, key0) in item.child" :key="key0">
						<view class="text-333 text-df  margin-left-34">{{child.name}}</view>
						<view class="flex algin-center">
							<view class="bg-f8 text-333 padding-lr-40  padding-tb-12 text-sm margin-right radius-100"
								@tap="delItem(item,child,'child')">删除</view>
							<view class="bg-theme1 text-white padding-lr-40  padding-tb-12 text-sm  radius-100"
								@tap="editItem(item,child,'child')">修改</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 空布局 -->
			<fu-empty-ui v-if="cateLists.length == 0 "></fu-empty-ui>
		</block>
		<!-- 库存输入弹框 -->
		<fu-popup v-model="isShowCate" mode="center" border-radius="16" :mask-close-able="true" :zIndex="998">
			<view class="bg-white width-560">
				<view class="text-center padding text-lg text-333">{{popType=='add'?'添加分类':'修改分类名称'}}</view>
				<view class="padding-lr padding-bottom">
					<view class="  text-df text-333">分类名称</view>
					<view class="bg-f8 radius-8 padding-sm text-df margin-top">
						<input type="text" maxlength="10" placeholder="请输入商品分类名称" v-model="cateName"
							placeholder-class="text-df text-999">
					</view>
				</view>
				<view class="foot solid-top flex align-center justify-between height-100">
					<view class="flex-sub text-gray solid-right text-center" @click="isShowCate=false">取消</view>
					<view class="flex-sub text-theme text-center" @click="handleConfirm">确定</view>
				</view>
			</view>
		</fu-popup>
		<fu-popup v-model="isShowBox" mode="bottom" border-radius="16" :mask-close-able="true" :zIndex="998">
			<view class="bg-white ">
				<!-- <view class="text-center padding text-lg text-333">{{popType=='add'?'添加分类':'修改分类名称'}}</view> -->
				<view class="text-center">
					<view class="text-df padding-tb  padding-tb-16 margin-top-sm text-center"
						@tap.stop="editItem(cateItem,'','')">
						修改名称</view>
					<view class="text-df padding-tb padding-bottom-16  text-center" @tap.stop="addPop('add','child',cateItem)">
						添加子类</view>
					<view class="text-df padding-tb  text-center" @tap.stop="delItem(cateItem,'','')">删除</view>
				</view>
			</view>
		</fu-popup>

		<!-- 断网检测组件 -->
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateLists: [],
				isShowCate: false,
				cateItem: '', //
				isShowBox: false, //一级分类操作弹框
				cateName: '',
				cate_id: '', //分类id
				popType: '', //弹框类型
				addType: '', //添加类型 child 子类
				editType: '', //添加类型 child 子类
				isShowLoading: false,
				pid: '', //上级分类id

			};
		},
		onLoad() {},
		onShow() {
			this.getCate()
		},
		onUnload() {

		},
		onPullDownRefresh() {
			this.getCate()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			addPop(type, addType, item) {
				this.isShowBox = false
				this.isShowCate = true
				this.popType = type
				if (addType == 'child') {
					this.cateName = ''
					this.pid = item.id
					this.cate_id = ''
				} else {
					this.cateName = ''
					this.cate_id = ''
					this.pid = ''
				}

			},
			openItem(item) {
				item.isOpen = !item.isOpen
				this.$forceUpdate()
			},
			openSet(item) {
				// item.isShowBox = !item.isShowBox
				// this.$forceUpdate()
				this.cateItem = item
				this.isShowBox = true
			},
			hideAll(e) {
				console.log(e, '=========');
				this.cateLists.forEach(item => {
					this.$set(item, 'isShowBox', false)
				})
				// this.$forceUpdate()
			},
			handleConfirm() {
				let url = '',
					data = {};
				if (!this.cateName) {
					return this.$message.info('请输入分类名称');
				}
				if (this.popType == 'add') {
					url = '/v1/63dc6ae7da4f8'
					data = {
						name: this.cateName,
						pid: this.pid
					}
				} else { //编辑分类
					url = '/v1/63dc6f9fb37e0'
					data = {
						name: this.cateName,
						id: this.cate_id
					}
				}
				this.$util.throttle(() => {
					this.$api.post(url, data)
						.then(res => {
							if (res.data.code == 1) {
								this.getCate()
								this.isShowCate = false
							} else {
								this.$message.info(res.data.msg);
							}
						});
				}, 2000)

			},
			// 删除分类
			delItem(item, child, type) {
				this.isShowBox = false
				this.$util.showModal({
					title: this.i18n['提示'],
					content: '确定要删除该分类吗?',
					confirmColor: this.$store.state.themeColor,
					success: (res) => {
						if (res.confirm) {
							let id = '';
							if (type == 'child') {
								id = child.id
							} else {
								id = item.id
							}
							this.$api.post('/v1/63dc70a35e880', {
									id: id
								})
								.then(res => {
									if (res.data.code == 1) {
										this.getCate()
									} else {
										this.$message.info(res.data.msg);
									}
								});
						}
					}

				})

			},
			// 修改名称
			editItem(item, child, type) {
				this.popType = 'edit'
				if (child) {
					this.cateName = child.name
				} else {
					this.cateName = item.name
				}
				this.isShowBox = false
				this.isShowCate = true

				this.cate_id = ''
				if (type == 'child') {
					this.cate_id = child.id
				} else {
					this.cate_id = item.id
				}


			},
			getCate() {
				this.$api
					.post('/v1/6356329f1f82a', {
						partner_id: global.userInfo && global.userInfo.id
					})
					.then(res => {
						this.isShowLoading = false;
						if (res.data.code == 1) {
							this.cateLists = res.data.data
							this.cateLists.map(item => {
								item.isOpen = false
								item.isShowBox = false
							})
						} else {
							this.$message.error(res.data.msg);
						}
					})
					.catch(err => {
						this.isShowLoading = false;
					});
			},
		},

	}
</script>

<style>
	.hiddenBox {
		position: absolute;
		top: 62rpx;
		right: 0;
		width: 160rpx;
		z-index: 199;
	}

	.hiddenText {
		position: absolute;
		top: 62rpx;
		right: 0;
		width: 160rpx;
		z-index: 299;
	}
</style>